{% extends 'base.html' %}

{% block title %}校区管理 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}校区管理{% endblock %}

{% block extra_css %}
<style>
    .dashboard-stats {
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }
    .stat-card.danger { border-left-color: #dc3545; }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }
    .stat-icon.danger { color: #dc3545; }

    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
    }

    .dashboard-section {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        color: #2c3e50;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .campus-info-card {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .campus-name {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .campus-address {
        opacity: 0.9;
        margin-bottom: 1rem;
    }

    .campus-contact {
        display: flex;
        gap: 2rem;
        opacity: 0.9;
    }

    .pending-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .pending-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 10px rgba(0,123,255,0.1);
    }

    .pending-header {
        display: flex;
        justify-content: between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .pending-name {
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .pending-meta {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .pending-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
    }

    .coach-level {
        padding: 0.25rem 0.5rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-left: auto;
    }

    .level-senior { background: #dc3545; color: white; }
    .level-middle { background: #ffc107; color: #212529; }
    .level-junior { background: #28a745; color: white; }

    .coach-bio {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0.5rem 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .quick-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    .btn-primary-custom {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
    }

    .btn-success-custom {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
    }

    .btn-info-custom {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
    }

    .btn-warning-custom {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #212529;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4rem;
        opacity: 0.3;
        margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
        .campus-contact {
            flex-direction: column;
            gap: 0.5rem;
        }

        .quick-actions {
            flex-direction: column;
        }

        .quick-action-btn {
            min-width: auto;
        }

        .pending-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .coach-level {
            margin-left: 0;
            margin-top: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% if error %}
        <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
        </div>
    {% else %}
        <!-- 校区信息 -->
        {% if campus %}
        <div class="campus-info-card">
            <div class="campus-name">{{ campus.name }}</div>
            <div class="campus-address">
                <i class="bi bi-geo-alt me-2"></i>{{ campus.address }}
            </div>
            <div class="campus-contact">
                {% if campus.contact_name %}
                <div><i class="bi bi-person me-2"></i>{{ campus.contact_name }}</div>
                {% endif %}
                {% if campus.phone %}
                <div><i class="bi bi-telephone me-2"></i>{{ campus.phone }}</div>
                {% endif %}
                {% if campus.email %}
                <div><i class="bi bi-envelope me-2"></i>{{ campus.email }}</div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- 统计卡片 -->
        <div class="dashboard-stats">
            <div class="row g-3">
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card success">
                        <div class="stat-icon success">
                            <i class="bi bi-mortarboard"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_students or 0 }}</h3>
                        <div class="stat-label">活跃学员</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card info">
                        <div class="stat-icon info">
                            <i class="bi bi-person-check"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_coaches or 0 }}</h3>
                        <div class="stat-label">认证教练</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card warning">
                        <div class="stat-icon warning">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.pending_coaches or 0 }}</h3>
                        <div class="stat-label">待审核教练</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-grid-3x3"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_tables or 0 }}</h3>
                        <div class="stat-label">可用球台</div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                    <div class="stat-card primary">
                        <div class="stat-icon primary">
                            <i class="bi bi-arrow-left-right"></i>
                        </div>
                        <h3 class="stat-number">{{ stats.total_relations or 0 }}</h3>
                        <div class="stat-label">师生关系</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 今日统计 -->
        {% if today_stats %}
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-calendar-day"></i>今日数据
            </h4>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="text-center">
                        <div class="stat-number text-success">{{ today_stats.new_students or 0 }}</div>
                        <div class="stat-label">新注册学员</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-center">
                        <div class="stat-number text-primary">{{ today_stats.today_reservations or 0 }}</div>
                        <div class="stat-label">今日预约</div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="row">
            <!-- 待审核教练 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-person-check"></i>待审核教练申请
                        {% if stats.pending_coaches > 0 %}
                            <span class="badge bg-warning ms-2">{{ stats.pending_coaches }}</span>
                        {% endif %}
                    </h4>

                    {% if pending_coaches %}
                        {% for coach in pending_coaches %}
                        <div class="pending-item">
                            <div class="pending-header">
                                <div>
                                    <h6 class="pending-name">{{ coach.real_name }}</h6>
                                    <p class="pending-meta">申请时间：{{ coach.created_at.strftime('%Y-%m-%d %H:%M') if coach.created_at else '' }}</p>
                                </div>
                                <div class="coach-level level-{{ coach.coach_level }}">
                                    {% if coach.coach_level == 'senior' %}高级教练
                                    {% elif coach.coach_level == 'middle' %}中级教练
                                    {% elif coach.coach_level == 'junior' %}初级教练
                                    {% endif %}
                                </div>
                            </div>
                            {% if coach.bio %}
                            <p class="coach-bio">{{ coach.bio }}</p>
                            {% endif %}
                            <div class="pending-actions">
                                <a href="{{ url_for('coaches.review', id=coach.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                                <button class="btn btn-sm btn-success" onclick="approveCoach({{ coach.id }})">
                                    <i class="bi bi-check-lg me-1"></i>通过
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="rejectCoach({{ coach.id }})">
                                    <i class="bi bi-x-lg me-1"></i>拒绝
                                </button>
                            </div>
                        </div>
                        {% endfor %}

                        {% if pending_coaches|length >= 10 %}
                        <div class="text-center">
                            <a href="{{ url_for('coaches.pending') }}" class="btn btn-outline-primary">
                                查看全部待审核申请
                            </a>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-check-circle"></i>
                            <p>暂无待审核的教练申请</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 师生关系申请 -->
            <div class="col-lg-6">
                <div class="dashboard-section">
                    <h4 class="section-title">
                        <i class="bi bi-arrow-left-right"></i>师生关系申请
                    </h4>

                    {% if recent_relations %}
                        {% for relation in recent_relations %}
                        <div class="pending-item">
                            <div class="pending-header">
                                <div>
                                    <h6 class="pending-name">
                                        {{ relation.student.real_name }} 申请 {{ relation.coach.real_name }}
                                    </h6>
                                    <p class="pending-meta">申请时间：{{ relation.applied_at.strftime('%Y-%m-%d %H:%M') if relation.applied_at else '' }}</p>
                                </div>
                            </div>
                            <div class="pending-actions">
                                <a href="{{ url_for('relations.detail', id=relation.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                            </div>
                        </div>
                        {% endfor %}

                        {% if recent_relations|length >= 10 %}
                        <div class="text-center">
                            <a href="{{ url_for('relations.pending') }}" class="btn btn-outline-primary">
                                查看全部关系申请
                            </a>
                        </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="bi bi-check-circle"></i>
                            <p>暂无师生关系申请</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="dashboard-section">
            <h4 class="section-title">
                <i class="bi bi-lightning"></i>快捷操作
            </h4>
            <div class="quick-actions">
                <a href="{{ url_for('students.list') }}" class="quick-action-btn btn-success-custom">
                    <i class="bi bi-mortarboard me-2"></i>学员管理
                </a>
                <a href="{{ url_for('coaches.list') }}" class="quick-action-btn btn-info-custom">
                    <i class="bi bi-person-check me-2"></i>教练管理
                </a>
                <a href="{{ url_for('tables.list') }}" class="quick-action-btn btn-primary-custom">
                    <i class="bi bi-grid-3x3 me-2"></i>球台管理
                </a>
                <a href="{{ url_for('admin_reservations.list_reservations') }}" class="quick-action-btn btn-warning-custom">
                    <i class="bi bi-calendar-check me-2"></i>预约管理
                </a>
            </div>
        </div>
    {% endif %}
</div>

<!-- 确认对话框 -->
{% include 'components/confirmation_modal.html' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动刷新统计数据
    setInterval(function() {
        fetch('/api/stats')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Stats updated:', data.stats);
            }
        })
        .catch(error => console.error('Error fetching stats:', error));
    }, 30000);
});

// 审核教练申请
function approveCoach(coachId) {
    if (confirm('确定要通过这个教练申请吗？')) {
        fetch(`/coaches/approve/${coachId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}

function rejectCoach(coachId) {
    const reason = prompt('请输入拒绝原因（可选）：');
    if (reason !== null) {
        fetch(`/coaches/reject/${coachId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
            },
            body: JSON.stringify({ reason: reason })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('操作失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
        });
    }
}
</script>
{% endblock %}